<template>
  <div class="my-tag">
    <input
      v-if="edit"
      @blur="edit = false"
      v-focus
      @keydown.enter="close"
      v-model.trim="tag"
      class="input"
      type="text"
      placeholder="输入标签"
    />
    <div @dblclick="showedit" v-else class="text">{{ value }}</div>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      required: true,
    },
  },
  // 自定义指令 当页面渲染是 自动获取焦点 v-focus
  directives: {
    focus: {
      inserted(el) {
        el.focus();
      },
    },
  },
  data() {
    return {
      edit: false,
      tag: "",
    };
  },
  methods: {
    showedit() {
      this.edit = true;
      this.tag=this.value
    },
    close() {
        // 非空判断 如果用户没有输入内容  标签都没了,用户就无法点击   所以给个默认值  再加上trim 清除前后空格,防止客户调皮 加空格
        if(this.tag===''){
            this.tag='暂无'
        }
      this.$emit("input", this.tag);
      this.edit=false
      this.tag=''
    },
  },
};
</script>

<style lang="less" scoped>
</style>>
.my-tag {
  cursor: pointer;
  .input {
    appearance: none;
    outline: none;
    border: 1px solid #ccc;
    width: 100px;
    height: 40px;
    box-sizing: border-box;
    padding: 10px;
    color: #666;
    &::placeholder {
      color: #666;
    }
  }
}
</style>